<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link rel="stylesheet" href="/css/user.css">
  <link rel="stylesheet" href="/js/layui/css/layui.css">
</head>

<body>

  <!-- <table></table> -->
  <div class="big">
    <form>
      <span>用户名：</span><input type="text" id="username"> <br>
      <span>账号：</span><input type="text" id="age"> <br>
      <span>密码：</span><input type="text" id="pass"> <br>
      <span>年龄：</span><input type="text" id="gender"> <br>
      <button id="btn">提交</button>
    </form>
    <div class="right">
      <table>
      </table>
    </div>

  </div>

</body>

</html>
<script src="/js/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/tools.js"></script>
<script>
  // 获取所有的用户信息
  // layer.load()
  ajax('/users/list').then(res => {
    console.log(res)
    document.querySelector('table').innerHTML = mkli(res)
  });
  var exp = /^[a-zA-Z]\w{5,11}$/;
  var exp1 = /^\d{5,11}$/;
  var exp2 = /^\d{0,3}$/;
  document.querySelector('#btn').onclick = function () {
    let username = document.querySelector('#username').value;
    let age = document.querySelector('#age').value;
    let gender = document.querySelector('#gender').value;
    let pass = document.querySelector('#pass').value;
    var exps = exp.test($('#username').val())
    if (!exps) {
      layer.msg('用户名：以字母开头且最少5~11位')
      $('#username').focus()
      return false;
    }
    var exps1 = exp1.test($('#age').val())
    if (!exps1) {
      layer.msg('账号：5~11数字')
      $('#age').focus()
      return false;
    }
    var exps2 = exp.test($('#pass').val())
    if (!exps2) {
      layer.msg('密码：以字母开头且最少5~11位')
      $('#pass').focus()
      return false;
    }
    var exps3 = exp2.test($('#gender').val())
    if (!exps3) {
      layer.msg('年龄：年龄最少0~999岁')
      $('#gender').focus()
      return false;
    }
    // ajax请求
    // return false;
    ajax('/users/add', `name=${username}&age=${age}&gender=${gender}&pass=${pass}`, 'post')
      .then(res => document.querySelector('table').innerHTML = mkli(res))
  }

  function del(id) {
    layer.confirm('您确定要删除吗？', {
      btn: ['确定', '取消'] //按钮
    }, function () {
      ajax(`/users/${id}`, '', 'delete').then(res => document.querySelector('table').innerHTML = mkli(res));
      layer.msg('删除成功', {
        icon: 1
      });
    });
  }
</script>